<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { formOptions, gridOptions } from './data/options';
import { Button, Popconfirm } from 'ant-design-vue';
import { menuRemove } from './data/api';
import { message } from 'ant-design-vue';
import { IconifyIcon as VbenIcon } from '@vben/icons';
import EditDrawer from './components/editDrawer.vue';

// 抽屉
const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: EditDrawer,
});
// 打开抽屉
const openDrawer = (row: any) => {
  drawerApi.setData({
    ...row,
  });
  drawerApi.open();
};
//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  // formOptions,
  gridOptions,
});
// 删除菜单
const removeMenu = async (row: any) => {
  let res: any = await menuRemove({ ids: row.menuId });
  message.success(res.message);
  refreshData();
};
// 刷新数据
const refreshData = () => {
  gridApi.query();
  setTimeout(() => {
    gridApi.grid?.setAllTreeExpand(true);
  }, 200);
};
</script>

<template>
  <div>
    <Page>
      <Grid table-title="菜单列表">
        <template #toolbar-tools>
          <Button type="primary" @click="openDrawer({})"> 新增 </Button>
        </template>
        <template #iconSpan="{ row }">
          <div class="flex justify-center">
            <VbenIcon class="text-xl" :icon="row.icon" />
          </div>
        </template>
        <template #action="{ row }">
          <Button type="link" @click="openDrawer(row)"
            ><span class="icon-[mdi--square-edit-outline] text-xl"></span
          ></Button>
          <Popconfirm
            title="确定要删除该数据？"
            @confirm="() => removeMenu(row)"
          >
            <Button type="link"
              ><span class="icon-[mdi--delete-outline] text-xl"></span
            ></Button>
          </Popconfirm>
        </template>
      </Grid>
    </Page>
    <Drawer @success="() => refreshData()" />
  </div>
</template>
